<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="ai-header">
			<view class="back-btn" @tap="goBack">
				<image src="/static/icons/back.png" mode="aspectFit"></image>
			</view>
			<view class="ai-title">
				<view class="ai-title-text">AI学习助手</view>
				<view class="ai-status">
					<view class="status-dot"></view>
					<text>在线</text>
				</view>
			</view>
			<view class="exit-btn" @tap="exitChat">
				<text>退出</text>
			</view>
		</view>
		
		<!-- 聊天记录 -->
		<scroll-view 
			scroll-y 
			class="chat-list"
			:scroll-top="scrollTop"
			:scroll-into-view="scrollIntoView"
			@scrolltoupper="loadMoreHistory"
			@scroll="onScroll"
			:show-scrollbar="false"
		>
			<!-- 消息列表 -->
			<view class="chat-item" v-for="(item, index) in chatList" :key="index" :id="'msg-' + index">
				<!-- AI消息 -->
				<view class="message ai" v-if="item.type === 'ai'">
					<view class="avatar-container">
						<image src="/static/ai-avatar.png" mode="aspectFill" class="avatar"></image>
						<view class="avatar-glow"></view>
					</view>
					<view class="content-container">
						<view class="content">
							<view class="typing-indicator" v-if="index === chatList.length - 1 && item.isTyping">
								<view class="typing-dot"></view>
								<view class="typing-dot"></view>
								<view class="typing-dot"></view>
							</view>
							<text class="text">{{item.content}}</text>
						</view>
						<view class="message-footer" v-if="item.timestamp">
							<text class="time">{{item.timestamp}}</text>
						</view>
					</view>
				</view>
				
				<!-- 用户消息 -->
				<view class="message user" v-else>
					<view class="content-container">
						<view class="content">
							<text class="text">{{item.content}}</text>
							<view class="image-content" v-if="item.image">
								<image :src="item.image" mode="aspectFit"></image>
							</view>
						</view>
						<view class="message-footer" v-if="item.timestamp">
							<text class="time">{{item.timestamp}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部空白区，确保所有消息可见 -->
			<view class="bottom-space"></view>
		</scroll-view>
		
		<!-- 输入区域容器 -->
		<view class="input-area-container" :class="{'ios-safe-area': true}">
			<view class="input-area" :class="{'with-image': selectedImage}">
				<!-- 图片预览 -->
				<view class="image-preview-container" v-if="selectedImage">
					<view class="image-preview">
						<image :src="selectedImage" mode="aspectFit"></image>
						<view class="delete-btn" @tap="deleteImage">
							<image src="/static/icons/delete.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				
				<view class="input-box-wrapper">
					<view class="input-box" :class="{ 'focused': inputFocus }">
						<view class="upload-btn" @tap="chooseImage">
							<image src="/static/icons/image.png" mode="aspectFit"></image>
						</view>
						<input 
							style="height: 24rpx;width: 100%;"
							type="text" 
							v-model="inputMessage" 
							placeholder="输入你的问题" 
							@confirm="sendMessage"
							:focus="inputFocus"
							@focus="onInputFocus"
							@blur="onInputBlur"
						/>
						<view class="voice-btn" @touchstart="startVoiceRecord" @touchend="stopVoiceRecord">
							<image src="/static/icons/microphone.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="send-btn" :class="{ 'active': inputMessage.trim() || selectedImage }" @tap="sendMessage">
						<image src="/static/icons/send.png" mode="aspectFit"></image>
					</view>
				</view>
				
				<!-- 语音录制状态显示 -->
				<view class="voice-recording" v-if="isRecording">
					<view class="voice-wave"></view>
					<text>松开发送</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollTop: 0,
			scrollIntoView: '',
			inputMessage: '',
			inputFocus: false,
			selectedImage: '',
			isScrolling: false,
			isRecording: false,
			recorderManager: null,
			chatList: [
				{
					type: 'ai',
					content: '你好！我是AI学习助手，有什么我可以帮你的吗？',
					timestamp: '10:00',
					isTyping: false
				}
			]
		}
	},
	onLoad() {
		// 页面加载时滚动到底部
		this.$nextTick(() => {
			this.scrollToBottom();
		});
		
		// 初始化录音管理器
		this.initRecorder();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		exitChat() {
			// 退出聊天功能
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		chooseImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.selectedImage = res.tempFilePaths[0]
				}
			})
		},
		deleteImage() {
			this.selectedImage = ''
		},
		sendMessage() {
			if (!this.inputMessage.trim() && !this.selectedImage) return
			
			const now = new Date()
			const timestamp = now.getHours().toString().padStart(2, '0') + ':' + 
							now.getMinutes().toString().padStart(2, '0')
			
			// 添加用户消息
			this.chatList.push({
				type: 'user',
				content: this.inputMessage,
				image: this.selectedImage,
				timestamp: timestamp
			})
			
			// 清空输入框和图片
			this.inputMessage = ''
			this.selectedImage = ''
			
			// 滚动到底部
			this.$nextTick(() => {
				this.scrollToBottom();
			})
			
			// 添加AI正在输入状态
			setTimeout(() => {
				this.chatList.push({
					type: 'ai',
					content: '',
					timestamp: new Date().getHours().toString().padStart(2, '0') + ':' + 
							new Date().getMinutes().toString().padStart(2, '0'),
					isTyping: true
				})
				
				this.$nextTick(() => {
					this.scrollToBottom();
				})
				
				// 2秒后显示AI回复
				setTimeout(() => {
					const lastIndex = this.chatList.length - 1;
					this.chatList[lastIndex].isTyping = false;
					this.chatList[lastIndex].content = '我理解你的问题，让我来为你解答...';
					
					this.$nextTick(() => {
						this.scrollToBottom();
					})
				}, 2000)
			}, 500)
		},
		scrollToBottom() {
			if (this.chatList.length > 0) {
				this.scrollIntoView = 'msg-' + (this.chatList.length - 1);
			}
		},
		onScroll(e) {
			// 可以在这里处理滚动状态
			this.isScrolling = true;
			
			// 防抖处理
			clearTimeout(this.scrollTimer);
			this.scrollTimer = setTimeout(() => {
				this.isScrolling = false;
			}, 200);
		},
		loadMoreHistory() {
			// 加载更多历史消息
			console.log('加载更多历史消息');
		},
		onInputFocus() {
			this.inputFocus = true
		},
		onInputBlur() {
			this.inputFocus = false
		},
		// 初始化录音管理器
		initRecorder() {
			// #ifdef APP-PLUS || MP-WEIXIN
			this.recorderManager = uni.getRecorderManager();
			
			this.recorderManager.onStop((res) => {
				// 录音结束后的回调
				if (res.tempFilePath) {
					// 发送语音消息的逻辑
					// 实际应用中可能需要先将语音转为文本
					const now = new Date();
					const timestamp = now.getHours().toString().padStart(2, '0') + ':' + 
								   now.getMinutes().toString().padStart(2, '0');
					
					this.chatList.push({
						type: 'user',
						content: '[语音消息]',
						audioPath: res.tempFilePath,
						timestamp: timestamp
					});
					
					this.$nextTick(() => {
						this.scrollToBottom();
					});
					
					// 添加AI正在输入状态
					setTimeout(() => {
						this.chatList.push({
							type: 'ai',
							content: '',
							timestamp: new Date().getHours().toString().padStart(2, '0') + ':' + 
									 new Date().getMinutes().toString().padStart(2, '0'),
							isTyping: true
						})
						
						this.$nextTick(() => {
							this.scrollToBottom();
						})
						
						// 2秒后显示AI回复
						setTimeout(() => {
							const lastIndex = this.chatList.length - 1;
							this.chatList[lastIndex].isTyping = false;
							this.chatList[lastIndex].content = '我已收到你的语音消息，正在处理...';
							
							this.$nextTick(() => {
								this.scrollToBottom();
							})
						}, 2000)
					}, 500)
				}
			});
			// #endif
		},
		// 开始录音
		startVoiceRecord(e) {
			// #ifdef APP-PLUS || MP-WEIXIN
			this.isRecording = true;
			
			this.recorderManager.start({
				duration: 60000, // 最长录音时间，单位ms
				sampleRate: 16000, // 采样率
				numberOfChannels: 1, // 录音通道数
				encodeBitRate: 64000, // 编码码率
				format: 'mp3' // 音频格式
			});
			// #endif
			
			// #ifdef H5
			uni.showToast({
				title: 'H5环境暂不支持录音',
				icon: 'none'
			});
			// #endif
		},
		// 结束录音
		stopVoiceRecord(e) {
			// #ifdef APP-PLUS || MP-WEIXIN
			this.isRecording = false;
			this.recorderManager.stop();
			// #endif
		}
	}
}
</script>

<style lang="scss">
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #FFFFFF;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(245, 248, 255, 1) 100%);
	background-size: cover;
	position: relative;
	overflow: hidden;
	color: #333;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: radial-gradient(circle at top right, rgba(85, 130, 230, 0.05) 0%, rgba(52, 68, 147, 0.03) 25%, rgba(255, 255, 255, 0) 50%);
		pointer-events: none;
		z-index: 1;
	}
}

/* 顶部导航栏 */
.ai-header {
	padding: 44px 16px 12px;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(85, 130, 230, 0.12);
	position: relative;
	z-index: 10;
	
	&::after {
		content: '';
		position: absolute;
		bottom: -1px;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(90deg, 
			rgba(85, 130, 230, 0) 0%, 
			rgba(85, 130, 230, 0.2) 50%, 
			rgba(85, 130, 230, 0) 100%);
	}
	
	.back-btn {
		width: 36px;
		height: 36px;
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(85, 130, 230, 0.08);
		margin-right: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		
		image {
			width: 20px;
			height: 20px;
			opacity: 0.7;
		}
		
		&:active {
			background-color: rgba(85, 130, 230, 0.15);
		}
	}
	
	.ai-title {
		flex: 1;
		display: flex;
		flex-direction: column;
		
		.ai-title-text {
			font-size: 18px;
			font-weight: 600;
			margin-bottom: 2px;
			background: linear-gradient(90deg, #4268CA 0%, #6B8BEC 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-fill-color: transparent;
		}
		
		.ai-status {
			display: flex;
			align-items: center;
			
			.status-dot {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				background-color: #3ED598;
				margin-right: 6px;
				box-shadow: 0 0 8px rgba(62, 213, 152, 0.6);
				position: relative;
				
				&::after {
					content: '';
					position: absolute;
					top: -4px;
					left: -4px;
					right: -4px;
					bottom: -4px;
					border-radius: 8px;
					background: rgba(62, 213, 152, 0.3);
					animation: pulse-status 2s infinite;
				}
			}
			
			text {
				font-size: 12px;
				color: rgba(51, 51, 51, 0.65);
				letter-spacing: 0.5px;
			}
		}
	}
	
	.exit-btn {
		padding: 6px 12px;
		background-color: rgba(85, 130, 230, 0.08);
		border-radius: 16px;
		margin-left: 10px;
		
		text {
			font-size: 14px;
			color: #4268CA;
			font-weight: 500;
		}
		
		&:active {
			background-color: rgba(85, 130, 230, 0.15);
		}
	}
}

/* 聊天列表区域 */
.chat-list {
	flex: 1;
	padding: 16px 12px;
	background-color: transparent;
	position: relative;
	padding-bottom: 100px; /* 给输入区域留出足够空间 */
	height: calc(100vh - 80px);
	box-sizing: border-box;
	overflow-anchor: auto;
	-webkit-overflow-scrolling: touch; /* 增强iOS滚动体验 */
	z-index: 2;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 80px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%);
		z-index: 3;
		pointer-events: none;
	}
	
	.bottom-space {
		height: 80px;
		width: 100%;
	}
	
	.chat-item {
		margin-bottom: 28px;
		position: relative;
		transition: transform 0.2s ease;
		animation: messageAppear 0.4s ease-out;
		
		.message {
			display: flex;
			align-items: flex-start;
			max-width: 100%;
			
			.avatar-container {
				position: relative;
				width: 40px;
				height: 40px;
				margin-right: 12px;
				flex-shrink: 0;
				
				.avatar {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					box-shadow: 0 0 15px rgba(85, 130, 230, 0.2);
					position: relative;
					z-index: 2;
					border: 1.5px solid rgba(85, 130, 230, 0.4);
				}
				
				.avatar-glow {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 54px;
					height: 54px;
					border-radius: 27px;
					background: radial-gradient(circle, rgba(85, 130, 230, 0.2) 0%, rgba(85, 130, 230, 0) 70%);
					z-index: 1;
					animation: glow 3s infinite alternate;
				}
				
				&::before {
					content: '';
					position: absolute;
					top: -2px;
					left: -2px;
					right: -2px;
					bottom: -2px;
					border-radius: 50%;
					background: conic-gradient(
						rgba(85, 130, 230, 0.4),
						rgba(62, 213, 152, 0.4),
						rgba(85, 130, 230, 0.4)
					);
					z-index: 0;
					animation: rotate 3s linear infinite;
				}
			}
			
			.content-container {
				max-width: 75%;
				
				.content {
					position: relative;
					background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 249, 255, 0.95) 100%);
					border: 1px solid rgba(85, 130, 230, 0.2);
					border-radius: 18px;
					padding: 14px 18px;
					overflow: hidden;
					box-sizing: border-box;
					box-shadow: 0 6px 16px rgba(85, 130, 230, 0.08);
					backdrop-filter: blur(5px);
					-webkit-backdrop-filter: blur(5px);
					
					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						height: 1px;
						background: linear-gradient(90deg, 
							rgba(85, 130, 230, 0) 0%, 
							rgba(85, 130, 230, 0.2) 50%, 
							rgba(85, 130, 230, 0) 100%);
					}
					
					.typing-indicator {
						display: flex;
						align-items: center;
						height: 20px;
						
						.typing-dot {
							width: 7px;
							height: 7px;
							border-radius: 4px;
							background-color: #5582E6;
							margin-right: 5px;
							opacity: 0.7;
							box-shadow: 0 0 5px rgba(85, 130, 230, 0.3);
							
							&:nth-child(1) {
								animation: typingDot 1.2s 0s infinite;
								background-color: #5582E6;
							}
							
							&:nth-child(2) {
								animation: typingDot 1.2s 0.2s infinite;
								background-color: #6B8BEC;
							}
							
							&:nth-child(3) {
								animation: typingDot 1.2s 0.4s infinite;
								background-color: #8CAAF3;
								margin-right: 0;
							}
						}
					}
					
					.text {
						font-size: 15px;
						line-height: 1.5;
						color: rgba(51, 51, 51, 0.9);
						word-break: break-word;
						letter-spacing: 0.2px;
					}
					
					.image-content {
						margin-top: 12px;
						border-radius: 12px;
						overflow: hidden;
						background-color: #F6F9FF;
						width: 100%;
						border: 1px solid rgba(85, 130, 230, 0.15);
						
						image {
							width: 100%;
							max-height: 220px;
							object-fit: contain;
						}
					}
					
					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						height: 1px;
						background: linear-gradient(90deg, 
							rgba(85, 130, 230, 0) 0%, 
							rgba(85, 130, 230, 0.15) 50%, 
							rgba(85, 130, 230, 0) 100%);
					}
				}
				
				.message-footer {
					padding: 4px 8px;
					
					.time {
						font-size: 11px;
						color: rgba(51, 51, 51, 0.4);
						letter-spacing: 0.5px;
					}
				}
			}
			
			&.ai {
				.content::before {
					content: '';
					position: absolute;
					left: -6px;
					top: 16px;
					width: 12px;
					height: 12px;
					background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 249, 255, 0.95) 100%);
					transform: rotate(45deg);
					border-left: 1px solid rgba(85, 130, 230, 0.2);
					border-bottom: 1px solid rgba(85, 130, 230, 0.2);
					border-radius: 0;
					z-index: 1;
				}
			}
			
			&.user {
				flex-direction: row-reverse;
				
				.content-container {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					
					.content {
						background: linear-gradient(135deg, rgba(233, 240, 255, 0.95) 0%, rgba(218, 230, 255, 0.95) 100%);
						border: 1px solid rgba(85, 130, 230, 0.25);
						
						&::before {
							content: '';
							position: absolute;
							right: -6px;
							top: 16px;
							width: 12px;
							height: 12px;
							background: linear-gradient(135deg, rgba(233, 240, 255, 0.95) 0%, rgba(218, 230, 255, 0.95) 100%);
							transform: rotate(45deg);
							border-right: 1px solid rgba(85, 130, 230, 0.25);
							border-top: 1px solid rgba(85, 130, 230, 0.25);
							border-radius: 0;
							z-index: 1;
						}
						
						.text {
							color: rgba(51, 51, 51, 0.9);
						}
					}
				}
			}
		}
	}
}

/* 输入区域容器 */
.input-area-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	width: 100%;
	
	&.ios-safe-area {
		padding-bottom: var(--safe-area-inset-bottom, 0);
	}
}

.input-area {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	transition: all 0.25s ease;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(90deg, 
			rgba(85, 130, 230, 0) 0%, 
			rgba(85, 130, 230, 0.1) 50%, 
			rgba(85, 130, 230, 0) 100%);
	}
	
	&.with-image {
		padding-top: 10px;
	}
	
	.image-preview-container {
		padding: 0 16px 10px;
	}
	
	.image-preview {
		width: 100px;
		height: 100px;
		border-radius: 12px;
		overflow: hidden;
		background-color: #F6F9FF;
		border: 1px solid rgba(85, 130, 230, 0.15);
		position: relative;
		
		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		.delete-btn {
			position: absolute;
			top: 6px;
			right: 6px;
			width: 26px;
			height: 26px;
			background-color: rgba(255, 255, 255, 0.9);
			border-radius: 13px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid rgba(255, 91, 91, 0.4);
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
			
			image {
				width: 14px;
				height: 14px;
			}
			
			&:active {
				transform: scale(0.92);
			}
		}
	}
	
	.input-box-wrapper {
		height: 56px;
		min-height: 56px;
		padding: 0 16px;
		display: flex;
		align-items: center;
	}
	
	.input-box {
		flex: 1;
		height: 40px;
		display: flex;
		align-items: center;
	
		border-radius: 20px;
		margin-right: 12px;
		.upload-btn, .voice-btn {
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 16px;
			flex-shrink: 0;
			background: rgba(0, 0, 0, 0.03);
			transition: all 0.2s ease;
			
			image {
				width: 18px;
				height: 18px;
				opacity: 0.6;
				transition: all 0.2s ease;
			}
			
			&:active {
				background-color: rgba(0, 0, 0, 0.06);
				transform: scale(0.95);
			}
		}
		
		input {
			flex: 1;
			height: 40px;
			font-size: 15px;
			color: #333;
			margin: 0 8px;
			
			&::placeholder {
				color: rgba(51, 51, 51, 0.35);
			}
		}
	}
	
	.send-btn {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.03);
		border-radius: 20px;
		border: 1px solid rgba(0, 0, 0, 0.03);
		transition: all 0.3s ease;
		flex-shrink: 0;
		
		image {
			width: 18px;
			height: 18px;
			opacity: 0.5;
			transition: all 0.3s ease;
		}
		
		&.active {
			background: linear-gradient(135deg, #4268CA 0%, #6B8BEC 100%);
			border-color: rgba(85, 130, 230, 0.35);
			box-shadow: 0 0 15px rgba(85, 130, 230, 0.25);
			
			image {
				opacity: 1;
				transform: scale(1.05);
				filter: brightness(0) invert(1);
			}
			
			&:active {
				transform: scale(0.95);
				background: linear-gradient(135deg, #3C5FBB 0%, #5A79D6 100%);
			}
		}
	}
	
	/* 语音录制状态 */
	.voice-recording {
		position: absolute;
		bottom: 90px;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		padding: 24px 32px;
		border-radius: 18px;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 101;
		border: 1px solid rgba(85, 130, 230, 0.15);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 1px;
			background: linear-gradient(90deg, 
				rgba(85, 130, 230, 0) 0%, 
				rgba(85, 130, 230, 0.25) 50%, 
				rgba(85, 130, 230, 0) 100%);
		}
		
		.voice-wave {
			width: 80px;
			height: 80px;
			border-radius: 40px;
			background: linear-gradient(135deg, #4268CA 0%, #6B8BEC 100%);
			margin-bottom: 18px;
			position: relative;
			animation: pulse 1.5s infinite;
			overflow: hidden;
			
			&::before {
				content: '';
				position: absolute;
				width: 28px;
				height: 28px;
				
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				filter: brightness(0) invert(1);
				z-index: 2;
			}
			
			&::after {
				content: '';
				position: absolute;
				top: -5px;
				left: -5px;
				right: -5px;
				bottom: -5px;
				border-radius: 45px;
				border: 1px solid rgba(85, 130, 230, 0.35);
				box-shadow: 0 0 20px rgba(85, 130, 230, 0.4);
				animation: pulse 1.5s infinite 0.5s;
				z-index: 1;
			}
		}
		
		text {
			color: #333;
			font-size: 16px;
			letter-spacing: 1px;
			font-weight: 500;
			margin-top: 4px;
		}
	}
}

/* 动画效果 */
@keyframes messageAppear {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(85, 130, 230, 0.6);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 15px rgba(85, 130, 230, 0);
	}
	
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(85, 130, 230, 0);
	}
}

@keyframes pulse-status {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.8);
	}
}

@keyframes glow {
	0% {
		opacity: 0.6;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0.1;
		transform: translate(-50%, -50%) scale(1.4);
	}
}

@keyframes typingDot {
	0%, 60%, 100% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-5px);
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style> 